import React from 'react';
import { nanoid } from 'nanoid';
import { useNode } from '@craftjs/core';
import { Tabs, Button, Input, Radio } from 'antd';
import { MinusCircleOutlined } from '@ant-design/icons';
import styles from './settings.less';

const sizeOptions = [
  { label: '小', value: 'small' },
  { label: '中', value: 'middle' },
  { label: '大', value: 'large' },
];
const tabPositionOptions = [
  { label: '顶部', value: 'top' },
  { label: '右侧', value: 'right' },
  { label: '底部', value: 'bottom' },
  { label: '左侧', value: 'left' },
];

export default () => {
  const {
    props: { items, type, size, tabPosition },
    actions: { setProp },
  } = useNode((node) => ({
    props: node.data.props,
  }));

  return (
    <div className={styles.settingContainer}>
      <Tabs>
        <Tabs.TabPane key="attribute" tab="属性">
          <div className={styles.settingContainerContent}>
            <div className={styles.tabControl}>
              <div>标签页：</div>
              <div className={styles.tabControlList}>
                {items.map(({ label, key }, index) => (
                  <div key={key} className={styles.tabControlListItem}>
                    {!!index && (
                      <MinusCircleOutlined
                        onClick={() => {
                          setProp((props) => {
                            const nextItems = [...props.items];
                            const index = _.findIndex(
                              nextItems,
                              ({ key: currentKey }) => currentKey === key,
                            );
                            if (index > -1) {
                              nextItems.splice(index, 1);
                              props.items = nextItems;
                            }
                          }, 500);
                        }}
                      />
                    )}
                    <Input
                      size="small"
                      value={label}
                      bordered={false}
                      onChange={(e) => {
                        setProp((props) => {
                          const nextItems = [...props.items];
                          const index = _.findIndex(
                            nextItems,
                            ({ key: currentKey }) => currentKey === key,
                          );
                          if (index > -1) {
                            nextItems[index].label = e.target.value;
                            props.items = nextItems;
                          }
                        }, 500);
                      }}
                    />
                  </div>
                ))}
                <Button
                  size="small"
                  type="dashed"
                  onClick={() => {
                    setProp(
                      (props) =>
                        (props.items = [...props.items, { label: 'TabItem', key: nanoid(12) }]),
                      500,
                    );
                  }}
                >
                  添加tab项
                </Button>
              </div>
            </div>
            <div className={styles.styleControl}>
              <div>样式：</div>
              <Radio.Group
                value={type}
                options={[
                  { label: '线条', value: 'line' },
                  { label: '卡片', value: 'card' },
                ]}
                onChange={(e) => {
                  setProp((props) => (props.type = e.target.value), 500);
                }}
              />
            </div>
            <div className={styles.sizeControl}>
              <div>尺寸：</div>
              <Radio.Group
                size="small"
                optionType="button"
                value={size}
                options={sizeOptions}
                onChange={(e) => {
                  setProp((props) => (props.size = e.target.value), 500);
                }}
              />
            </div>
            <div className={styles.positionControl}>
              <div>尺寸：</div>
              <Radio.Group
                size="small"
                optionType="button"
                value={tabPosition}
                options={tabPositionOptions}
                onChange={(e) => {
                  setProp((props) => (props.tabPosition = e.target.value), 500);
                }}
              />
            </div>
          </div>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};
